{
  "properties" : { },
  "id" : "copy1731155472024d78810",
  "script" : null,
  "groupId" : "cc518b4aaadd45b3a3c5a653f2ee082f",
  "name" : "syjkhm.html",
  "createTime" : 1731318320004,
  "updateTime" : 1731155106690,
  "lock" : null,
  "createBy" : "管理员",
  "updateBy" : "管理员",
  "path" : "syjkhm.html"
}
================================
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>|</title>
    <link rel="stylesheet" href="/plugs/layui/css/layui.css" />
    <link rel="stylesheet" href="/plugs/video/video-js.min.css"/>
	
	<script type="application/javascript" src="/plugs/video/video.min.js"></script>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      html, body {
        height: 100%; padding-top: 8px;
      }
      .layui-table .layui-form-select .layui-input{
        height: 28px
      }

      /* 设计样式 */ 
      .data-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1rem; padding: 1rem; box-sizing: border-box; }
      .data-card { background-color: #f9f9f9; border-radius: 5px; overflow: hidden; transition: box-shadow 0.3s ease; } 
      .card-image { width: 100%; height: auto; object-fit: cover; min-height: 37px; background-color: saddlebrown; }
      .card-content { padding: 1rem; } .card-title { font-weight: bold; margin-bottom: 0.5rem; }
      .card-details { color: gray; }
      .reload-badge {
        bottom: 5px; right: 5px; cursor: pointer;
        color: blue; position: absolute;
        text-shadow: 2px 2px 2px rgba(255, 187, 183, 0.6),
        1px 1px 1px rgba(255, 187, 183, 0.5);
      }
      .file-size { text-align: right; } /* 鼠标悬停效果 */ .data-card:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } 
      .card-title { white-space: nowrap; /* 阻止换行 */ overflow: hidden; /* 如果内容超出容器，隐藏多余部分 */ text-overflow: ellipsis; /* 添加省略号 */ line-height: 1.4; /* 提升可读性，可根据需要调整 */ max-width: 90%; /* 限制名称宽度，可根据实际内容调整 */ } 
      .card-details{ max-width: 90%; }
    </style>
</head>
<body>

<#list groupList as gpItem>
<fieldset class="layui-elem-field">
  <legend>${gpItem.pageName}</legend>
  <div class="layui-field-box">
    
  <div class="data-container">
    <#list gpItem.list as item>

      <div class="data-card">
          <div style="position: sticky;">
            <span class="reload-badge" lay-on="gxst" data_id="${item.id}" >当前画面</span>

            <#if item.isError == false>
            <img src="/api/feature/videoapi/img?id=${item.id}" class="card-image" lay-on="fdtp" id="videoImg_${item.id}" data_id="${item.id}" />
            </#if>
            <#if item.isError == true>
            <img src="/img/video_error.jpg" class="card-image" id="videoImg_${item.id}" data_id="${item.id}" />
            </#if>
          </div>
          
          <div class="card-content">
              <h4 class="card-title">${item.name}</h4>
              <p class="card-details"> </p>
              <#if item.isStart == false && item.isError == false>
              <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-on="kqtl" data_id="${item.id}" >开启推流</button>
              </#if>
              <#if item.isStart == true>
              <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-on="ckjk" data_id="${item.id}" >查看监控</button>
              <button class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" lay-on="gbtl" data_id="${item.id}" >关闭推流</button>
              </#if>
          </div>
      </div>

    </#list>
  </div>

</fieldset>
</#list>


  
  <script src="/plugs/layui/layui.js"></script>
  <script type="text/javascript">
    layui.use(function(){
      var treeTable = layui.treeTable;
      var table = layui.table;
      var layer = layui.layer;
      var form = layui.form;
      var util = layui.util;
      var $ = layui.jquery;

      util.on('lay-on', {
        fdtp: function(){
          console.log($(this))
          
        },
        kqtl: function(){
            layer.msg('请稍等');
            videoId = this.getAttribute('data_id');

            $.ajax({
              url: '/api/feature/msgapi/ycqdtc', type: 'GET', 
              data: { id: videoId }, success: function(res){
                if(res.code == 200 && res.data == 1){
                  layer.msg(res.msg, { icon: 1 });
                  location.reload();
                } else {
                  layer.alert("失败，设备可能离线", { icon: 5, title: false});
                }
              }
              ,error: function(res, msg){layer.msg('error');}
            });
        },
        gbtl: function(){
            layer.msg('请稍等');
            videoId = this.getAttribute('data_id');

            $.ajax({
              url: '/api/feature/msgapi/yctztc', type: 'GET', 
              data: { id: videoId }, success: function(res){
                if(res.code == 200 && res.data == 1){
                  layer.msg(res.msg, { icon: 1 });
                  location.reload();
                } else {
                  layer.alert("失败", { icon: 5, title: false});
                }
              }
              ,error: function(res, msg){layer.msg('error');}
            });

        },
        gxst: function(){
            layer.msg('请稍等');
            videoId = this.getAttribute('data_id');

            $.ajax({
              url: '/api/feature/msgapi/ychmtc', type: 'GET', 
              data: { id: videoId }, success: function(res){
                if(res.code == 200 && res.data == 1){
                  layer.msg(res.msg, { icon: 1 });
                  
                  
                  $('#videoImg_'+videoId).attr('src', '');
                  $('#videoImg_'+videoId).attr('src', '/api/feature/videoapi/img?id='+videoId);
                } else {
                  layer.alert("失败，设备可能离线", { icon: 5, title: false});
                }
              }
              ,error: function(res, msg){layer.msg('error');}
            });

        },
        ckjk: function(){
            videoId = this.getAttribute('data_id');
            
            layer.open({
              type: 1, title: false,
              area: ['98%', '98%'],
              shade: 0.6, // 遮罩透明度
              shadeClose: true,
              anim: 0,
              content: '<video id="video_'+videoId+'" poster="/api/feature/videoapi/img?id='+videoId+'" class="video-js vjs-default-skin vjs-big-play-centered" muted controls   style="height: 100%;width:100%;" > <source src="/api/feature/msgapi/video.m3u8?id='+videoId+'" type="application/x-mpegURL" /> </video>'
            });

            // 
            window['dqPlayer'] = videojs('video_'+videoId, {controls: true, preload: 'auto', controlBar: {fullscreenToggle: true}});
        }
      });

    });
  </script>
  

</body>
</html>